/**
* 模版
**/

<template>
  <el-row>
    <el-col :span="6">

          <h2 style="text-align: center; color: #F56C6C;">场地结构</h2>
          <el-tree :data="data" :props="treeProps" node-key="id" default-expand-all :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="text" @click="() => append(data)">
                  <i class="el-icon-document-add"></i>
                </el-button>
                <el-button type="text" @click="() => remove(node, data)">
                  <i class="el-icon-delete" style="color: red;"></i>
                </el-button>
              </span>

            </span>
          </el-tree>

    </el-col>

    <el-col :span="18">
      <!-- 表格 -->
      <div class="grid-content bg-purple-dark">
        <div>
          <CRUD
            ref="crud"
            @refreshTree="getTree()"
            :stacolumn="column"
            :List="getlist"
            :Update="toUpdate"
            :Add="toAdd"
            :Delete="toDelete"
            :title="title"
            :dialogTitle="dialogTitle"
            :searchProp="searchProp"
            :searchText="searchText"></CRUD>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  // 导入组件
  import temp from "../../components/template.vue";
  import {
    List,
    Delete,
    Add,
    Update,
    Tree,
  } from '../../api/fieldMG.js'
  // 导出模块
  export default {
    // 模块名字

    // 模块数据
    data() {
      //数据
      return {
        // 树配置
        treeProps: {
          label: 'name'
        },
        // 树数据
        data: [],
        // 面包屑标题
        title: '场地管理',
        // 数据表单标题
        dialogTitle: '场地信息',
        // 搜索字段的属性名
        searchProp: 'name',
        // 搜索框提示
        searchText: '搜索场地',

        // CRUD方法
        getlist: function(page, pagesize) {
          return List(page, pagesize, -1);
        },
        toUpdate: function(form) {
          return Update(form);
        },
        toDelete: function(id) {
          return Delete(id);
        },
        toAdd: function(form) {
          return Add(form);
        },

        // 表单结构设置
        column: [{
            label: 'id',
            prop: 'id',
            disable: true,
            tagType: 'input',
            type: "text",
          },
          {
            label: '场地名',
            prop: 'name',
            disable: false,
            tagType: 'input',
            type: "text",
          },
          {
            label: '限制人数',
            prop: 'maxPerson',
            disable: false,
            tagType: 'counter',
            type: "text",
          },
          {
            label: '父级场地',
            prop: 'parentId',
            disable: false,
            tagType: 'selector',
            options: [

            ]
          },

        ],
      };
    },
    // 注册组件
    components: {
      "CRUD": temp
    },
    // 监听指定值，只有指定值变化，才会触发
    watch: {},
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
      addFun() {},
      submitFun() {},

      append(data) {
        this.$refs.crud.dialogFormVisible = true;
        this.$refs.crud.formAction = 2;
        this.$refs.crud.form = {parentId: data.id};

      },

      remove(node, data) {
        console.log(data)
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
        this.toDelete(data.id).then(res => {
          this.$message({
            message: `删除成功数量${res.data.successCount}`,
            type: "success"
          })
        });
      },

      getTree() {
        // 刷新树
        console.log("正在获取树")
        Tree().then(res => {
          this.data = res;
        })
        // this.$refs.crud.getPage(this.$refs.crud.currentPage, this.$refs.crud.perPage)

      }
    },
    // 创建前状态(里面是操作)
    beforeCreate() {},
    // 创建完毕状态(里面是操作)
    created() {
      // 初始化树
      this.getTree();
    },
    // 挂载前状态(里面是操作)
    beforeMount() {},
    // 挂载结束状态(里面是操作)
    mounted() {},
    // 更新前状态(里面是操作)
    beforeUpdate() {},
    // 更新完成状态(里面是操作)
    updated() {},
    // 销毁前状态(里面是操作)
    beforeDestroy() {},
    // 销毁完成状态(里面是操作)
    destroyed() {}
  };
</script>
// scoped 样式只在本组件使用
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
